<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">前台模板管理</el-menu-item>
      <el-menu-item index="2">后台模板管理</el-menu-item>
    </el-menu>

    <el-main>
      <!--前台模板管理-->
      <div v-if="activeIndex === '1'">
<!--

-->
        <el-table :data="clienData" stripe="true">
          <el-table-column type="index" label="序号" min-width="60" align="center"/>
          <el-table-column prop="moduleName" label="模块名称" min-width="190" align="center"/>
          <el-table-column prop="page" label="推送页面" min-width="190" align="center"/>
          <el-table-column prop="state" label="启用状态" min-width="90" align="center"/>
          <el-table-column prop="showType" label="展示类型" min-width="90" align="center"></el-table-column>
          <el-table-column prop="sort" label="排序值" min-width="90" align="center"></el-table-column>
          <el-table-column prop="updateDate" label="修改日期" min-width="190" align="center"></el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template #default="scope">
              <el-button type="success" @click="update()">编辑</el-button>
              <el-button type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--后台模板管理-->
      <div v-if="activeIndex === '2'">
        <el-table :data="serverData" stripe="true">
          <el-table-column type="index" label="序号" min-width="60" align="center"/>
          <el-table-column prop="moduleName" label="模块名称" min-width="190" align="center"/>
          <el-table-column prop="page" label="推送页面" min-width="190" align="center"/>
          <el-table-column prop="state" label="启用状态" min-width="90" align="center"/>
          <el-table-column prop="sort" label="排序值" min-width="90" align="center"></el-table-column>
          <el-table-column prop="sort" label="修改日期" min-width="190" align="center"></el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template #default="scope">
              <el-button type="success" @click="update()">编辑</el-button>
              <el-button type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </div>
  <el-pagination background layout="prev, pager, next" :total="1000" style="width: 1200px;"></el-pagination>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from "element-plus";


//编辑信息按钮
const update = () => {
  ElMessage.success("后续跳转到该模块详情页");

}

//删除用户信息按钮
const del = () => {
  ElMessage.success("假装已删除此模板");
}

const clienData = [
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    showType:'图文',
    sort:'8',
    updateDate:'2024/4/12',
  }
];


const serverData = ref([
  {
    moduleName: '权限管理',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  },
  {
    moduleName: '房屋列表板块',
    page: '02',
    state: '启用',
    sort:'8',
    updateDate:'2024/4/12',
  }
]);





const activeIndex = ref('1');

const handleSelect = (index) => {
  activeIndex.value = index;
};

</script>

<style scoped>

</style>